<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
    <link
      href="./src/mdui.min.css"
      rel="stylesheet"
    />
    <link
      href="./src/style.min.css"
      rel="stylesheet"
    />
    <title>HTML to Image</title>
  </head>
  <body>
    <div id="fakeWechatMoment" class="iosStyle" style="display: block; width: 1080px; height: 1920px;">
        <div class="topBar" id="topBar" >
          <div id="topBarAppIcons"></div>
          <div style="flex-grow: 1"></div>
          <img id="topBarIconWifi" class="topBarIcon">
          <img id="topBarIconSignal" class="topBarIcon">
          <img id="topBarIconBattery" class="topBarIcon">
          <span id="topBarTime">14:26</span>
        </div>
        <div class="topBarIos" id="topBarIos" style="display: flex;">
          <span id="topBarTimeIos">14:26</span>
          <div style="flex-grow: 1"></div>
          <img id="topBarIconIos" class="topBarIcon" src="mdicons/white_icons/ios_status.svg">
        </div>
        <div id="topBarCustom" style="">
          <img id="topBarCustomImage" style="width: 100%">
        </div>
        <div class="header" id="header">
          <img style="width: 28px; height: 48px" src="mdicons/white_icons/back.svg">
          <div style="flex-grow: 1; text-align: center">详情</div>
          <div style="width: 28px; transform: scaleX(-100%)">···</div>
        </div>
        <div class="main" id="main">
          <div style="height: 30px"></div>
          <div class="avatarOut">
            <div class="squareImage avatarIn" id="avatar" style="background-image: url(&quot;&quot;);"></div>
          </div>
          <div class="content">
            <div class="name" id="name">A 营销号免费广告姬</div>
            <div style="height: 11px"></div>
            <div class="text" id="text">很实用的教程<img class="emoticon" src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.3.13/assets/Expression/Expression_1@2x.png"><br>需要收集五个赞 谢谢大家啦～(　^ω^)</div>
            <div class="article" id="article" style="display: none">
              <div class="squareImage articleIcon" id="articleIcon" style="
                  background-image: url();
                "></div>
              <div class="articleTitle" id="articleTitle">还不会用Google的你，就要被时代淘汰了</div>
            </div>
            <div class="singleImage" id="singleImage" style="display: none">
              <img id="image" class="image" src="https://cc-im-kefu-cos.7moor-fs1.com/im/4d2c3f00-7d4c-11e5-af15-41bf63ae4ea0/S9rwwjJo.jpg">
            </div>
            <div class="multiImage" id="multiImage" style="display: none">
              <div class="squareImage multiImageBox" id="image1"></div>
              <div class="squareImage multiImageBox" id="image2"></div>
              <div class="squareImage multiImageBox" id="image3"></div>
              <div class="squareImage multiImageBox" id="image4"></div>
              <div class="squareImage multiImageBox" id="image5"></div>
              <div class="squareImage multiImageBox" id="image6"></div>
              <div class="squareImage multiImageBox" id="image7"></div>
              <div class="squareImage multiImageBox" id="image8"></div>
              <div class="squareImage multiImageBox" id="image9"></div>
            </div>
            <div style="height: 20px"></div>
            <div class="info">
              <span id="location" style="color: rgb(87, 107, 149); display: none;"></span>
              <div style="height: 20px"></div>
              <span id="time">14:26 </span> &nbsp;
              <svg style="width: 40px; height: 40px; transform: translateY(4px)" viewBox="0 0 24 24" fill="#576b95">
                <path d="M15.4117646,4.50000215 L14.6107386,18.117444 C14.5485547,19.1745693 13.6731425,20 12.6141898,20 L5.38581016,20 C4.32685754,20 3.45144525,19.1745693 3.38926141,18.117444 L2.58823542,4.50000215 L0.5,4.50000215 L0.5,3.5 C0.5,3.22385763 0.723857625,3 1,3 L17,3 C17.2761424,3 17.5,3.22385763 17.5,3.5 L17.5,4.50000215 L15.4117646,4.50000215 Z M7,0.500034106 L11,0.500034106 C11.2761424,0.500034106 11.5,0.723891731 11.5,1.00003411 L11.5,2 L6.5,2 L6.5,1.00003411 C6.5,0.723891731 6.72385763,0.500034106 7,0.500034106 Z M6,6.99998133 L6.5,15.9999943 L8,15.9999943 L7.60000038,6.99998133 L6,6.99998133 Z M10.5,6.99998133 L10,15.9999943 L11.5,15.9999943 L12,6.99998133 L10.5,6.99998133 Z"></path>
              </svg>
            </div>
            <img style="
                position: relative;
                display: inline-block;
                width: auto;
                height: 42px;
                top: 9px;
              " src="mdicons/white_icons/comment.svg">
          </div>
          <div style="height: 50px"></div>
          <div class="like" id="like" style="display: block;">
            <img style="
                position: relative;
                left: 30px;
                top: 43px;
                display: inline-block;
                vertical-align: top;
              " height="32" src="like.svg" width="32">
            <div class="likeAvatarList" id="likeAvatarList">
                <div class="likeAvatar squareImage" style="background-image:url(&quot;https://i.akarin.dev/wms-avatar/K-vOsnGRB-UFXuoO.jpg&quot;)"></div><div class="likeAvatar squareImage" style="background-image:url(&quot;https://i.akarin.dev/wms-avatar/ho3Yq-qNoNDBnfrs.jpg&quot;)"></div><div class="likeAvatar squareImage" style="background-image:url(&quot;https://i.akarin.dev/wms-avatar/UyoF8ZPdvbW7NwdQ.jpg&quot;)"></div><div class="likeAvatar squareImage" style="background-image:url(&quot;https://i.akarin.dev/wms-avatar/Zmvmd26us7iwF6PA.jpg&quot;)"></div><div class="likeAvatar squareImage" style="background-image:url(&quot;https://i.akarin.dev/wms-avatar/-LbmiKhhq0JaPaWE.jpg&quot;)"></div><div class="likeAvatar squareImage" style="background-image:url(&quot;https://i.akarin.dev/wms-avatar/j2gBs28JSZ9_85S4.jpg&quot;)"></div></div>
            <div style="height: 17px"></div>
          </div>
          <div class="like" id="comment" style="margin-top: 1px; display: none;">
            <img style="
                position: relative;
                left: 30px;
                top: 45px;
                display: inline-block;
                vertical-align: top;
              " height="32" src="commentlist.svg" width="32">
            <div class="likeAvatarList" id="commentList"></div>
          </div>
        </div>
        <div class="footer" id="footer" style="bottom: -1123.55px;">
          <div class="commentInput">评论</div>
          <div style="width: 22px; display: inline-block"></div>
          <img style="width: 88px !important; height: 88px !important" src="mdicons/white_icons/emoticon.svg">
          <div style="width: 40px; display: inline-block"></div>
          <div class="commentSend">发送</div>
        </div>
      </div>
  </body>
</html>
